jQuery — Replacing Elements and Scrolling

jQuery is a popular JavaScript for creating dynamic web pages.

In this article, we’ll look at how to using jQuery in our web apps.

.replaceAll()

We call .replaceAll() to replace each target element with the set of matched elements.

For example, if we have:

<div class="container">
  <div class="inner first">Hello</div>
  <div class="inner second">And</div>
  <div class="inner third">Goodbye</div>
</div>

Then we can replace all the divs with class inner with an h2 element by writing:

$("<h2>New heading</h2>").replaceAll(".inner");

.replaceWith()

The .replaceWith() method lets us replace each element in the set of matched elements with the provided new content and return the set of elements that were removed.

For example, if we have:

<div class="container">
  <div class="inner first">Hello</div>
  <div class="inner second">And</div>
  <div class="inner third">Goodbye</div>
</div>

Then we can replace the div with the class second with an h2 by writing:

$("div.second").replaceWith("<h2>New heading</h2>");

:reset Selector

The :reset selector lets us select all elements of type reset.

For example, if we have:

<form>
  <input type="button" value="Input Button">
  <input type="checkbox">
  <input type="file">
  <input type="hidden">
  <input type="password">
  <input type="radio">
  <input type="reset">
  <input type="submit">
  <input type="text">
  <select>
    <option>Option</option>
  </select>
  <textarea></textarea>
  <button>Button</button>
</form>
<div></div>

Then we get input with type reset and add a background and border to it by writing:

$("input:reset").css({
  background: "yellow",
  border: "3px red solid"
});

.resize()

The .resize() method lets us watch for resize JavaScript event or trigger it on an element.

For instance, we can use it by writing:

$(window).resize(function() {
  console.log("Handler for .resize() called.");
})

We log when window is resized.

:root Selector

The :root selector selects the element that’s the root of the element.

For example, we can use it by writing:

console.log($(":root")[0].nodeName)

Then we get 'HTML’ logged.

.scroll()

The .scroll() method binds an event handler to the scroll JavaScript event or lets us trigger it.

For example, if we have:

<div id="target" style="overflow: scroll; width: 200px; height: 100px;">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
  ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit
  esse cillum dolore eu fugiat nulla pariatur. Excepteur
  sint occaecat cupidatat non proident, sunt in culpa qui
  officia deserunt mollit anim id est laborum.
</div>
<div id="other">
  Trigger the handler
</div>

Then we can watch for scrolling on the div with the ID target by writing:

$("#target").scroll(function() {
  console.log('scrolling');
});

We can also trigger scrolling when we click on the div with ID other by writing:

$("#target").scroll(function() {
  console.log('scrolling');
});

$("#other").click(function() {
  $("#target").scroll();
});

.scrollLeft()

The .scrollLeft() method gets the current horizontal position of the scroll bar for the first element in the set of matched elements.

For example, if we have:

<p>Hello</p>
<p></p>

Then we get the horizontal positon of the scrollbar by writing:

const p = $("p").first();
console.log(p.scrollLeft())

Conclusion

We can replace elements and watch for scrolling with jQuery.